<script setup lang="ts">
import axios from "axios";
import {nextTick, ref} from "vue";
import SendSvg from "@/svg/sendSvg.vue";
import {ElScrollbar} from "element-plus";
import {answer, qaArr, question} from "@/store/songStore";
import ChatSettingSvg from "@/svg/ChatSettingSvg.vue";
import router from "@/Router";
import CarbonKnowSvg from "@/svg/CarbonKnowSvg.vue";

let showCarbonTipInfo = ref(true)
let preQArr = ref(["什么是碳资产，如何定义它？","2","1","2","1","2",])


function removeWhitespace(str) {
  // 使用正则表达式匹配并去除换行符、制表符和空格
  return str.replace(/[\n\t\s]+/g, '');
}


const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
// const actualClientHeight = 648
const actualClientHeight = 100



// nextTick(()=>{
//   if(innerRef.value!.clientHeight > actualClientHeight){
//     scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
//   }
// })

function newToQuestion(){
  showCarbonTipInfo.value = false;
  let userWord = {
    person:"user",
    words:question.value
  }
  qaArr.value.push(userWord)
  axios.post("https://api.closeai-proxy.xyz/v1/chat/completions",
      {
        "model": "gpt-3.5-turbo",
        "messages": [{"role": "user", "content": JSON.stringify(question.value)+"不能超过50字"}]
      },
      {
        headers:{
          "content-type":"application/json;",
          "Authorization":"Bearer sk-tHy9pL8JW1QIPM3GMNGCQIitk3rjKtq8j0k2HxGJ6dh9qCvC"
        }
      }
  ).then(res=>{
    console.log(res.data.choices[0].message.content)
    answer.value = res.data.choices[0].message.content
    let gptWord = {
      person:"gpt",
      words:answer.value
    }
    qaArr.value.push(gptWord)
    question.value = ""
    nextTick(()=>{
      if(innerRef.value!.clientHeight > actualClientHeight){
        scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
      }
    })
  })
  nextTick(()=>{
    if(innerRef.value!.clientHeight > actualClientHeight){
      scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
    }
  })
}

nextTick(()=>{
  console.log(innerRef.value!.clientHeight )
  if(innerRef.value!.clientHeight > 548){
    scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
    console.log(innerRef.value!.clientHeight)
  }
})


function testToQuestion(){
  showCarbonTipInfo.value = false;
  let userWord = {
    person:"user",
    words:question.value
  }
  qaArr.value.push(userWord)

  // answer.value = "你好发生的你好发生的你好发生的你好发生的你好发生的你好发生的你好发生的你好发生的你好发生的你好发生的你好发生的"
  answer.value = "adfsdssssssssssssssssssssssssssssss的你好发生的你好发生的你好发生的"
  let gptWord = {
    person:"gpt",
    words:answer.value
  }
  qaArr.value.push(gptWord)
  question.value = ""
  nextTick(()=>{
    console.log(innerRef.value!.clientHeight )
    if(innerRef.value!.clientHeight > 548){
      scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
      console.log(innerRef.value!.clientHeight)
    }
  })

}

function getUserCss(i){
  let v = [];
  if (i.person == "user") {
    if (i.words.length>40) {
      v.push("userTalkSpanMax");
    }else{
      v.push("userTalkSpan");
    }
  }else {
    if (i.words.length>40) {
      v.push("gptTalkSpanMax");
    }else{
      v.push("gptTalkSpan");
    }
  }
  return v;
}

function toSetting(){
  router.push("/chat_setting")
}

function clickedPreQ(preQ:string){
  question.value = preQ
  // newToQuestion()
  testToQuestion()
}

</script>

<template>
  <div class="body flex  h-88% w-full overflow-auto ">
    <template v-if="showCarbonTipInfo==true">
      <div class="w-full flex justify-center items-center">
        <div class="flex flex-col w-90% h-full justify-center items-center gap-4">
          <carbon-know-svg class="h-32 w-32 text-green-5"></carbon-know-svg>
          <p class="text-7">你好，我是碳知道</p>
          <p class="w-150 text-center">我是基于深度学习和自然语言处理技术的生成式AI产品，可以帮您解答碳资产领域相关的问题，提高您的工作学习效率。</p>
          <div class="mt-4 flex w-full justify-start items-start">
            <div class="text-gray-4 select-none">您可以试试这样问我</div>
          </div>
          <div class="w-full grid grid-cols-2 gap-4">
            <div v-for="ele in preQArr">
              <div class="bg-white p-2 rounded-lg hover:bg-green-4 hover:text-white cursor-pointer"
                   @click="clickedPreQ(ele)"
              >
                {{ele}}
              </div>
            </div>
          </div>

        </div>
      </div>
    </template>
    <template v-else>
      <!--    items-center justify-center  在chat-list 的父组件中定义flex这两个属性，会导致滑动异常-->
      <div class="chat-list mx-5 mt-5 w-full">
        <el-scrollbar ref="scrollbarRef" height="548px" always >
          <div ref="innerRef">
            <div  v-for="i in qaArr" :class="i.person=='user'?'userTalk':'gptTalk'"
                  class="w-full"
            >
              <div v-html="i.words" class=" p-3 text-5 rounded-t-lg"
                   :class="getUserCss(i)">
              </div>
            </div>

          </div>
        </el-scrollbar>
      </div>
    </template>

    <div class="ask-question fixed bottom-3  w-100% h-12  flex justify-around items-center gap-4">
      <button class="ml-5 h-13 w-13 border-3 border-white bg-green-4 rounded-full
            hover:bg-green-5 flex justify-center items-center"
              @click="toSetting"
      >
        <chat-setting-svg class="w-8 h-8 text-white"></chat-setting-svg>
      </button>
      <input class=" grow   bg-white  outline-none h-12 rounded-xl border-2
      border-gray-3  pl-5 hover:border-green-5 hover:border-3
      text-gray-5 text-5"
             placeholder="向我提问吧 ^_^"
             v-model="question"
             @keyup.enter="testToQuestion"
      />
      <button class="mr-5 h-13 w-13 border-3 border-white bg-green-4 rounded-full
      hover:bg-green-5 flex justify-center items-center"
              @click="testToQuestion"
      >
        <send-svg class="w-8 h-8 mr-0.7"></send-svg>
      </button>
    </div>

  </div>

</template>

<style scoped>
.userTalk{
  @apply mb-3  flex justify-end items-start ;
}

.gptTalk{
  @apply mb-3  flex justify-start items-start ;
}

.userTalkSpan{
  @apply    bg-green-5  text-white flex justify-end items-center rounded-l-lg break-all break-words;
}
.userTalkSpanMax{
  @apply w-160   bg-green-5  text-white flex justify-end items-center rounded-l-lg break-all break-words;
}
.gptTalkSpan{
  @apply  bg-white   text-gray-7  flex justify-start items-center rounded-r-lg break-all break-words;
}
.gptTalkSpanMax{
  @apply w-160 bg-white  text-gray-7  flex justify-start items-center rounded-r-lg break-all break-words;
}
.userNull{
  @apply w-0;
}
.gptNull{
  @apply w-0;
}

.userTalkRightImg{
  @apply w-15 h-15 ml--2 mr-4 rounded-full bg-white flex justify-center items-center border-3 border-green-5;
}

.userTalkRightInnerImg{
  @apply w-14  rounded-full ml-0.5;
}
.gptTalkLeftImg{
  @apply w-13 mr-2;
}



</style>